<template>
  <div>
    <!-- Attribute商品属性管理 -->
    <div class="title">
      名称
      <el-input
        v-model="tableDataName"
        placeholder="属性名称"
        style="width: 240px"
        size="medium"
      ></el-input>
      
      分类
      <el-select v-model="inpvalue" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" size="medium" @click="doFilter">查询</el-button>
      <el-button type="primary" size="medium" @click="openData">添加</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" border max-height="700">
      <el-table-column fixed prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="属性名称"></el-table-column>
      <el-table-column prop="attribute_category_id" label="属性分类">
        <template v-slot="scope">
          {{
            Categorylist[scope.row.attribute_category_id] &&
            Categorylist[scope.row.attribute_category_id].name
          }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getAttributeApi, getCategoryApi } from "../../request/httpaip";
export default {
  data() {
    return {
      //分类内容
      Categorylist: {},
   
      // 选择框内容
      options: [
        // {
        //   value: "选项1",
        //   label: "黄金糕",
        // },
      ],
      //输入框内容
      inpvalue: "",

      // 分页数据条数数
      total: 0,
      //请求页数
      page: 1,
      //显示条数
      pagesize:10,
         //输入框内容
      tableDataName: "",
      //表格内容
      tableData: [],
      //分页器当前页数
      currentPage4: 1,
    };
  },
  methods: {
    //一页显示条数事件
    handleSizeChange(val) {
      this.pagesize=val
      // 获取商品属性接口
      getAttributeApi({
        page: this.page,
        size:  this.pagesize,
        name: "",
      }).then((res) => {
        console.log(res.data);
        if (res.errno === 0) {
          this.tableData = res.data.data;
        }
      });
    },
    //页数点击事件
    handleCurrentChange(val) {
      this.page = val;
  
      // 获取商品属性接口
      getAttributeApi({
        page: this.page,
        size:  this.pagesize,
        name: "",
      }).then((res) => {
        console.log(res.data);
        if (res.errno === 0) {
          this.tableData = res.data.data;
        }
      });
    },
    
    // 查询事件
    doFilter() {
      // 获取商品属性接口
      getAttributeApi({
        page: this.page,
        size:  this.pagesize,
        name: this.tableDataName,
      }).then((res) => {
        console.log(res.data);
        if (res.errno === 0) {
          this.currentPage4 = res.data.currentPage4;
          //分页器当前页
          this.tableData = res.data.data;
          //表格数据
          this.pagesize = res.data.pageSize;
          //显示条数
          this.totalPages = res.data.totalPages;
          //总页数
          this.total = res.data.count;
          //数据总数
        }
      });
    },
    // 添加事件
    openData() {
       this.$router.push({  //核心语句
        path:'/addattribute',   //跳转的路径
        query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          id:this.id , 
        }
       })
    },
  },
  created() {
    //获取分类接口
    getCategoryApi().then((res) => {
      console.log(res.data.length);
      if (res.errno === 0) {
        //设置数组装换成对象以便进行对比
        this.Categorylist = res.data.reduce((perv, current) => {
          perv[current.id] = current;
          return perv;
        }, {});
        //设置选择框
        //  this.options.push({
        //    value:'选项'+res.data.index,
        //    label:res.data.name
        //  })
        // this.options=res.data.filter((val,index,self)=>{
        //   let arr =[]
        //      arr.push({
        //         value:'选项'+index,
        //         label:val.name
        //      })
        //      return arr
        // })
        //设置选择框内容
        for (var i = 0; i < res.data.length; i++) {
          this.options.push({
            value: "选项" + i,
            label: res.data[i].name,
          });
        }
        
      }
    });

    console.log(this.page);
    // 获取商品属性接口
    getAttributeApi({
      page: 1,
      size: 10,
      name: "",
    }).then((res) => {
      console.log(res.data);
      if (res.errno === 0) {
        this.tableData = res.data.data;
        this.total = res.data.count;
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
.title {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  /*输入框  */
  .el-input {
    margin: 0 8px;
  }
  /* 按钮 */
  .el-button {
    margin: 0 8px;
  }
  /* 单选框 */
  .el-select {
    margin: 0 8px;
  }
}
/* 分页样式 */
.el-pagination {
  float: right;
}
</style>